<template>
	<view class="activity-entry-page">
		<!-- 老人信息部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-indicator"></view>
				<text class="section-title">老人信息</text>
			</view>
			
			<view class="form-item" @tap="selectElderly">
				<text class="form-label">老人</text>
				<view class="form-select">
					<text class="select-text" :class="{ placeholder: !selectedElderly }">
						{{ selectedElderly ? selectedElderly.name : '请选择老人' }}
					</text>
					<text class="select-arrow">></text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">性别</text>
				<text class="form-value">{{ selectedElderly ? selectedElderly.gender : '-' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">年纪</text>
				<text class="form-value">{{ selectedElderly ? selectedElderly.age : '-' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">时间安排</text>
				<text class="form-value">{{ timeArrangement }}</text>
			</view>
		</view>

		<!-- 活动信息部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-indicator"></view>
				<text class="section-title">活动信息</text>
			</view>
			
			<view class="form-item" @tap="selectActivity">
				<text class="form-label">活动名称</text>
				<view class="form-select">
					<text class="select-text" :class="{ placeholder: !selectedActivity }">
						{{ selectedActivity ? selectedActivity.name : '请选择活动' }}
					</text>
					<text class="select-arrow">></text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">完成时间</text>
				<input class="form-input" v-model="completionTime" type="text" placeholder="2022-7-23 16:27:35" />
			</view>
			
			<view class="form-item">
				<text class="form-label">完成描述</text>
				<textarea class="form-textarea" v-model="description" placeholder="请输入备注信息" />
			</view>
			
			<view class="form-item upload-section">
				<text class="form-label">上传附件</text>
				<view class="attachment-area">
					<!-- 已上传的图片 -->
					<view class="attachment-item" v-for="(attachment, index) in attachments" :key="`uploaded-${index}`">
						<image class="attachment-thumb" :src="attachment" mode="aspectFill" />
						<view class="remove-btn" @tap="removeAttachment(index)">
							<text class="remove-icon">×</text>
						</view>
					</view>
					<!-- 正在上传的图片 -->
					<view class="attachment-item uploading" v-for="(uploadItem, index) in uploadingAttachments" :key="`uploading-${uploadItem.id}`">
						<image class="attachment-thumb" :src="uploadItem.tempPath" mode="aspectFill" />
						<view class="uploading-overlay">
							<view class="loading-spinner"></view>
							<text class="uploading-text">上传中</text>
						</view>
					</view>
					<!-- 添加按钮 -->
					<view 
						class="add-attachment" 
						@tap="addAttachment" 
						v-if="(attachments.length + uploadingAttachments.length) < 5"
					>
						<text class="add-icon">+</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 确认录入按钮 -->
		<view class="submit-section">
			<button class="submit-btn" :class="{ submitting: submitting }" @tap="submitEntry" :disabled="submitting">
				<text v-if="submitting">提交中...</text>
				<text v-else>确认录入</text>
			</button>
		</view>

		<!-- 老人选择弹窗 -->
		<view class="picker-modal" v-if="showElderlyPicker" @tap="closeElderlyPicker">
			<view class="picker-content" @tap.stop>
				<view class="picker-header">
					<text class="picker-title">选择老人</text>
					<view class="close-btn" @tap="closeElderlyPicker">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="picker-list">
					<!-- 加载状态 -->
					<view v-if="loadingElderly" class="loading-container">
						<view class="loading-spinner"></view>
						<text class="loading-text">加载中...</text>
					</view>
					<!-- 空数据状态 -->
					<view v-else-if="elderlyList.length === 0" class="empty-container">
						<text class="empty-text">暂无老人数据</text>
						<text class="retry-btn" @tap="loadElderlyData">点击重试</text>
					</view>
					<!-- 老人列表 -->
					<view v-else>
						<view 
							class="picker-item" 
							v-for="(elderly, index) in elderlyList" 
							:key="`elderly-picker-${elderly.id}-${index}`"
							@tap="selectElderlyItem(elderly)"
						>
							<text class="elderly-name">{{ elderly.name }}</text>
							<text class="elderly-info">{{ elderly.gender }} · {{ elderly.age }}岁</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 活动选择弹窗 -->
		<view class="picker-modal" v-if="showActivityPicker" @tap="closeActivityPicker">
			<view class="picker-content" @tap.stop>
				<view class="picker-header">
					<text class="picker-title">选择活动</text>
					<view class="close-btn" @tap="closeActivityPicker">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="picker-list">
					<view 
						class="picker-item" 
						v-for="(activity, index) in activityList" 
						:key="`activity-picker-${activity.id}-${index}`"
						@tap="selectActivityItem(activity)"
					>
						<text class="activity-name">{{ activity.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiUpload, apiUploadFormData, apiAddActivity, apiGetElderlyMembers } from '@/request/api.js'

export default {
	data() {
		return {
			selectedElderly: null,
			selectedActivity: '',
			completionTime: '',
			description: '',
			attachments: [], // 存储已上传的图片URL
			uploadingAttachments: [], // 存储正在上传的临时图片
			timeArrangement: '每天三次',
			submitting: false, // 提交状态
			loadingElderly: false, // 老人数据加载状态
			showElderlyPicker: false,
			showActivityPicker: false,
			elderlyList: [], // 老人列表数据
			activityList: [
				{ id: 1, name: '用药提醒' },
				{ id: 2, name: '康复训练' },
				{ id: 3, name: '日常护理' },
				{ id: 4, name: '健康检查' },
				{ id: 5, name: '心理疏导' },
				{ id: 6, name: '营养餐饮' },
				{ id: 7, name: '文娱活动' },
				{ id: 8, name: '户外活动' }
			]
		}
	},
	onLoad() {
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: '活动录入'
		});
		
		// 初始化完成时间为当前时间
		this.initCompletionTime();
		
		// 加载老人数据
		this.loadElderlyData();
	},
	methods: {
		// 初始化完成时间
		initCompletionTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			
			this.completionTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},

		// 加载老人数据
		async loadElderlyData() {
			if (this.loadingElderly) return;
			
			try {
				this.loadingElderly = true;
				
				// 获取用户信息
				const userInfo = this.getUserInfo();
				if (!userInfo) {
					console.log('用户未登录，无法获取老人数据');
					return;
				}
				
				const requestData = {
					uid: userInfo.uid || '33897',
					page: 1,
					limit: 100 // 获取所有老人数据
				};
				
				console.log('加载老人数据，参数:', requestData);
				const response = await apiGetElderlyMembers(requestData);
				console.log('老人数据响应:', response);
				
				if (response.code === 0 && response.data) {
					// 处理老人数据
					this.elderlyList = this.processElderlyData(response.data);
					console.log('处理后的老人列表:', this.elderlyList);
				} else {
					console.error('获取老人数据失败:', response);
					uni.showToast({
						title: '获取老人数据失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载老人数据失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				this.loadingElderly = false;
			}
		},

		// 处理老人数据
		processElderlyData(data) {
			if (!Array.isArray(data)) {
				console.log('老人数据不是数组格式:', data);
				return [];
			}
			
			return data
				.filter(member => member.name && member.id) // 过滤掉空数据
				.map(member => ({
					id: member.id,
					name: member.name,
					gender: member.sex === 0 ? '女' : '男',
					age: this.calculateAge(member.birthday),
					idCard: member.id_num || '',
					rawMember: member
				}));
		},

		// 计算年龄
		calculateAge(birthday) {
			if (!birthday || birthday === '0000-00-00') return '未知';
			const birth = new Date(birthday);
			const today = new Date();
			let age = today.getFullYear() - birth.getFullYear();
			const monthDiff = today.getMonth() - birth.getMonth();
			if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
				age--;
			}
			return age > 0 ? age.toString() : '未知';
		},

		// 选择老人
		selectElderly() {
			// 如果还没有老人数据且不在加载中，重新加载
			if (this.elderlyList.length === 0 && !this.loadingElderly) {
				this.loadElderlyData();
			}
			this.showElderlyPicker = true;
		},

		// 关闭老人选择弹窗
		closeElderlyPicker() {
			this.showElderlyPicker = false;
		},

		// 选择老人项目
		selectElderlyItem(elderly) {
			this.selectedElderly = elderly;
			this.closeElderlyPicker();
		},

		// 选择活动
		selectActivity() {
			this.showActivityPicker = true;
		},

		// 关闭活动选择弹窗
		closeActivityPicker() {
			this.showActivityPicker = false;
		},

		// 选择活动项目
		selectActivityItem(activity) {
			this.selectedActivity = activity;
			this.closeActivityPicker();
		},

		// 添加附件 - 单张上传
		addAttachment() {
			// 检查是否达到上传限制
			const totalCount = this.attachments.length + this.uploadingAttachments.length;
			if (totalCount >= 5) {
				uni.showToast({
					title: '最多上传5张图片',
					icon: 'none'
				});
				return;
			}
			
			uni.chooseImage({
				count: 1, // 一次只选择一张
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const filePath = res.tempFilePaths[0];
					this.uploadSingleImage(filePath);
				},
				fail: (error) => {
					console.log('选择图片失败:', error);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 单张图片上传
		async uploadSingleImage(filePath) {
			// 添加到正在上传列表
			const uploadItem = {
				id: Date.now(),
				tempPath: filePath,
				uploading: true,
				progress: 0
			};
			this.uploadingAttachments.push(uploadItem);
			
			try {
				console.log('开始上传图片:', filePath);
				
				// 方式1: 使用apiUpload - 传递文件流和额外的FormData字段
				const extraData = {
					// 可以在这里添加额外的表单字段
					// user_id: userInfo.uid,
					// upload_type: 'activity_attachment'
				};
				const response = await apiUpload(filePath, extraData, 'file');
				
				// 方式2: 使用apiUploadFormData - 完整的FormData格式 (可选)
				// const formDataObj = {
				//     filePath: filePath,
				//     fieldName: 'file',
				//     user_id: userInfo.uid,
				//     upload_type: 'activity_attachment'
				// };
				// const response = await apiUploadFormData(formDataObj);
				
				console.log('上传响应:', response);
				
				if (response.code === 0 && response.data) {
					// 上传成功，获取服务器返回的图片URL
					const imageUrl = response.data.url || response.data.path || response.data;
					
					// 从正在上传列表中移除
					const uploadIndex = this.uploadingAttachments.findIndex(item => item.id === uploadItem.id);
					if (uploadIndex > -1) {
						this.uploadingAttachments.splice(uploadIndex, 1);
					}
					
					// 添加到已上传列表
					this.attachments.push(imageUrl);
					
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
				} else {
					throw new Error(response.msg || '上传失败');
				}
			} catch (error) {
				console.error('上传图片失败:', error);
				
				// 从正在上传列表中移除
				const uploadIndex = this.uploadingAttachments.findIndex(item => item.id === uploadItem.id);
				if (uploadIndex > -1) {
					this.uploadingAttachments.splice(uploadIndex, 1);
				}
				
				uni.showToast({
					title: error.message || '上传失败',
					icon: 'none'
				});
			}
		},

		// 移除附件
		removeAttachment(index) {
			this.attachments.splice(index, 1);
		},

		// 表单验证
		validateForm() {
			if (!this.selectedElderly) {
				uni.showToast({
					title: '请选择老人',
					icon: 'none'
				});
				return false;
			}

			if (!this.selectedActivity) {
				uni.showToast({
					title: '请选择活动名称',
					icon: 'none'
				});
				return false;
			}

			if (!this.completionTime.trim()) {
				uni.showToast({
					title: '请填写完成时间',
					icon: 'none'
				});
				return false;
			}

			return true;
		},

		// 获取用户信息
		getUserInfo() {
			try {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.hasLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return null;
				}
				return userInfo;
			} catch (error) {
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				});
				return null;
			}
		},

		// 格式化时间为接口所需格式
		formatEventTime(timeStr) {
			// 将 "2022-7-23 16:27:35" 格式转为 "2025-08-10-22:00:00"
			const date = new Date(timeStr);
			if (isNaN(date.getTime())) {
				return timeStr; // 如果解析失败，返回原字符串
			}
			
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hours = date.getHours().toString().padStart(2, '0');
			const minutes = date.getMinutes().toString().padStart(2, '0');
			const seconds = date.getSeconds().toString().padStart(2, '0');
			
			return `${year}-${month}-${day}-${hours}:${minutes}:${seconds}`;
		},

		// 解析频次数字
		parseFrequencyNumber(arrangement) {
			// 从 "每天三次" 中提取数字
			const match = arrangement.match(/([一二三四五六七八九十\d]+)次/);
			if (match) {
				const numStr = match[1];
				// 中文数字转阿拉伯数字
				const numMap = { '一': 1, '二': 2, '三': 3, '四': 4, '五': 5, '六': 6, '七': 7, '八': 8, '九': 9, '十': 10 };
				return numMap[numStr] || parseInt(numStr) || 1;
			}
			return 1; // 默认1次
		},

		// 提交录入
		async submitEntry() {
			// 验证表单
			if (!this.validateForm()) {
				return;
			}

			// 检查是否有正在上传的图片
			if (this.uploadingAttachments.length > 0) {
				uni.showToast({
					title: '请等待图片上传完成',
					icon: 'none'
				});
				return;
			}

			if (this.submitting) return;

			// 获取用户信息
			const userInfo = this.getUserInfo();
			if (!userInfo) return;

			try {
				this.submitting = true;

				// 构建FormData参数 - 按照接口要求的格式
				const formData = {
					uid: userInfo.uid || '33897', // 用户ID
					member_id: this.selectedElderly.id.toString(), // 老人ID
					title: this.selectedActivity.name, // 活动标题
					active_id: this.selectedActivity.id.toString(), // 活动ID
					num_desc: this.timeArrangement, // 频次描述
					event_time: this.formatEventTime(this.completionTime), // 事件时间
					remark: this.description || '', // 备注描述
					'pics[]': this.attachments.length > 0 ? this.attachments.join('|') : '', // 图片URLs，用|分隔
					type: '1', // 活动类型，固定为1
					num: this.parseFrequencyNumber(this.timeArrangement).toString() // 频次数字
				};

				console.log('提交活动录入数据:', formData);

				const response = await apiAddActivity(formData);

				if (response.code === 0) {
					uni.showToast({
						title: '录入成功',
						icon: 'success'
					});

					// 清空表单
					this.resetForm();

					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: response.msg || '录入失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('活动录入失败:', error);
				uni.showToast({
					title: '录入失败，请重试',
					icon: 'none'
				});
			} finally {
				this.submitting = false;
			}
		},

		// 重置表单
		resetForm() {
			this.selectedElderly = null;
			this.selectedActivity = '';
			this.description = '';
			this.attachments = [];
			this.uploadingAttachments = [];
			this.initCompletionTime(); // 重新初始化时间
		}
	}
}
</script>

<style lang="scss" scoped>
.activity-entry-page {
	min-height: 100vh;
	background: #F8F8F8;
	padding: 20rpx;
}

.section {
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-indicator {
	width: 6rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #FF4856 0%, #FF6F1C 100%);
	border-radius: 3rpx;
	margin-right: 16rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 28rpx;
	color: #666666;
	min-width: 140rpx;
}

.form-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
	text-align: right;
}

.form-select {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

.select-text {
	font-size: 28rpx;
	color: #333333;
	margin-right: 12rpx;
}

.select-text.placeholder {
	color: #999999;
}

.select-arrow {
	font-size: 24rpx;
	color: #999999;
	transform: rotate(0deg);
}

.form-input {
	font-size: 28rpx;
	color: #333333;
	text-align: right;
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
}

.form-textarea {
	width: 100%;
	min-height: 120rpx;
	font-size: 28rpx;
	color: #333333;
	border: 1rpx solid #E0E0E0;
	border-radius: 8rpx;
	padding: 16rpx;
	box-sizing: border-box;
	resize: none;
	background: #FAFAFA;
	margin-top: 16rpx;
}

.upload-section {
	flex-direction: column;
	align-items: flex-start;
}

.attachment-area {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
	margin-top: 24rpx;
	width: 100%;
}

.attachment-item {
	position: relative;
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.attachment-thumb {
	width: 100%;
	height: 100%;
}

.remove-btn {
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.remove-icon {
	color: #FFFFFF;
	font-size: 24rpx;
	font-weight: bold;
}

.add-attachment {
	width: 140rpx;
	height: 140rpx;
	border: 2rpx dashed #E0E0E0;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F8F8F8;
}

.add-icon {
	color: #999999;
	font-size: 48rpx;
	font-weight: bold;
}

/* 上传中的样式 */
.attachment-item.uploading {
	position: relative;
}

.uploading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	border-top: 4rpx solid #FFFFFF;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 8rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.uploading-text {
	color: #FFFFFF;
	font-size: 20rpx;
}

.submit-section {
	padding: 40rpx 20rpx;
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #FF4856 0%, #FF6F1C 100%);
	border-radius: 44rpx;
	border: none;
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 72, 86, 0.3);
}

.submit-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 12rpx rgba(255, 72, 86, 0.3);
}

.submit-btn.submitting {
	background: linear-gradient(135deg, #cccccc 0%, #999999 100%);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	opacity: 0.6;
}

.submit-btn:disabled {
	opacity: 0.6;
	transform: none;
}

/* 选择弹窗样式 */
.picker-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
}

.picker-content {
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	width: 100%;
	max-height: 60vh;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.15);
	animation: slideUp 0.3s ease-out;
	display: flex;
	flex-direction: column;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

.picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	border-bottom: 1rpx solid #E0E0E0;
}

.picker-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.close-icon {
	font-size: 48rpx;
	color: #999999;
}

.picker-list {
	flex: 1;
	overflow-y: auto;
	padding: 0 40rpx 40rpx;
}

.picker-item {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
	display: flex;
	flex-direction: column;
}

.picker-item:last-child {
	border-bottom: none;
}

.elderly-name, .activity-name {
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
	margin-bottom: 8rpx;
}

.elderly-info {
	font-size: 26rpx;
	color: #666666;
}

/* 弹窗中的加载和空状态样式 */
.loading-container,
.empty-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 80rpx 40rpx;
}

.loading-container .loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid rgba(255, 72, 86, 0.3);
	border-top: 4rpx solid #FF4856;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text,
.empty-text {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 20rpx;
}

.retry-btn {
	font-size: 26rpx;
	color: #FF4856;
	padding: 16rpx 32rpx;
	border: 1rpx solid #FF4856;
	border-radius: 20rpx;
	background: transparent;
}
</style> 